【Vite】对 CSS 处理

您所在的位置：网站首页 › typescript 编译后怎么保留模块后缀 › 【Vite】对 CSS 处理

【Vite】对 CSS 处理

2023-07-07 08:27| 来源: 网络整理| 查看: 265

Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件

Vite 解析 CSS 文件的过程： ① 使用 fs 模块读取 .css 文件的内容 ② 创建一个 style 标签，将 .css 文件的内容 copy 到 style 标签内 ③ 将 style 标签插入到 index.html 的 head 标签中 ④ 将该 .css 文件的内容替换为 Js 脚本，以便于 CSS 模块化 & 热更新

CSS 模块化 (CSS Module)

在协同开发时，可能会出现相同的类名，该类名对应的样式就有可能被覆盖

import './componentA.css'; const div = document.createElement('div'); document.body.appendChild(div); div.className = 'footer'; import './componentB.css'; const div = document.createElement('div'); document.body.appendChild(div); div.className = 'footer'; .footer { width: 100px; height: 100px; background-color: aquamarine; } .footer { width: 100px; height: 100px; background-color: rgb(127, 197, 255); } import './componentA'; import './componentB';

yarn dev 启动服务器，可以看见两个 div 都是同一个颜色的，这就是因为相同类名之间发生样式覆盖了。

使用 CSS 模块化可以解决这个问题：

.footer { width: 100px; height: 100px; background-color: aquamarine; } .footer { width: 100px; height: 100px; background-color: rgb(127, 197, 255); } import componentACss from './componentA.module.css'; const div = document.createElement('div'); document.body.appendChild(div); div.className = componentACss.footer; import componentBCss from './componentB.module.css'; const div = document.createElement('div'); document.body.appendChild(div); div.className = componentBCss.footer;

yarn dev 启动服务器，就可以看见两个 div 的颜色不一样啦

启动 CSS Module 需要将 .css 后缀改为 .module.css，这是一个约定

CSS Module 的作用步骤：

将 .css 文件中的类名按某种规则进行替换。eg: footer → _footer_h08ai_1创建映射对象，存储着类名被替换前后的映射 { footer: "_footer_h08ai_1" }创建 style 标签，将替换类名后的 CSS 样式复制到里面将 style 标签插入 index.html 的 head 标签中将 XXX.module.css 的内容替换为 Js 脚本将创建的映射对象在脚本中进行默认导出

构建 CSS 的配置项 import { defineConfig } from 'vite'; export default defineConfig({ css: {}, // 配置 CSS 的构建方式 }); preprocessorOptions

配置 CSS 预处理器

import { defineConfig } from 'vite'; export default defineConfig({ css: { // 配置 CSS 预处理器 preprocessorOptions: { less: {}, sass: {}, }, }, });

preprocessorOptions.less

less: { math: 'always', // 配置什么时候执行数学运算 // 全局变量 globalVars: { mainColor: 'blue', }, },

preprocessorOptions.sass

scss: { // 在每个 scss 文件的开头添加一些额外的数据, 通常用来导入一些全局的 scss 变量或样式文件 additionalData: '@import "@/styles/variable.scss";', }, devSourcemap

是否在开发模式下生成 CSS 的 sourcemap，这样可以在浏览器的开发者工具中查看你的原始的 CSS 代码

import { defineConfig } from 'vite'; export default defineConfig({ css: { devSourcemap: true, // 默认为 false }, }); modules

配置 CSS 模块

import { defineConfig } from 'vite'; export default defineConfig({ css: { // 配置 CSS 模块 modules: {}, }, });

modules.localsConvention：规范 CSS Module 中类名的书写格式

'dashesOnly' 将映射对象中的类名都转换成中划线连接格式 (默认)'dashes' 将映射对象中的类名都转换成中划线连接格式，且保留其小驼峰格式'camelCaseOnly' 将映射对象中的类名都转换成小驼峰格式'camelCase' 将映射对象中的类名都转换成小驼峰格式，且保留其中划线连接格式 import { defineConfig } from 'vite'; export default defineConfig({ css: { modules: { localsConvention: 'dashesOnly', }, }, });

modules.generateScopedName：CSS Module 映射对象中 value 的命名方式

generateScopedName: '[name]-[contenthash:5]', postcss

配置 PostCSS 的选项

import { defineConfig } from 'vite'; import postcssPresetEnv from 'postcss-preset-env'; export default defineConfig({ css: { postcss: { plugins: [postcssPresetEnv()], // 使用预设 // 需要先安装预设: `yarn add postcss-preset-env -D` }, }, });

也可以使用 postcss.config.js 配置 postcss，postcss.config.js 的优先级会比 vite.config.js 的 css.postcss 低

PostCSS

PostCSS 是一种 CSS 处理工具，它可以让你使用一些高级的 CSS 特性，或者使用一些插件来扩展或优化你的 CSS 代码。

编译过程： ① 语法降级：用较低级的 CSS 语法替换高级 CSS 语法 ② 前缀补全：部分浏览器能支持高级 CSS 语法，但需要添加指定前缀 (eg: --webkit)

使用 PostCSS：安装依赖 yarn add postcss postcss-cli -D postcss-cli提供命令； postcss编译代码安装预设 yarn add postcss-preset-env -D 预设能帮你把编译所需的一些基本插件安装好，就不需要自己一个个安装啦编写 PostCSS 配置文件 const postcssPresetEnv = require("postcss-preset-env"); module.exports = { plugins: [postcssPresetEnv()], }; 编写 example.css 文件执行脚本编译文件：npx postcss example.css -o result.css 处理 CSS 全局变量：

PostCSS 会一个个地对 .css 文件进行编译。假设有如下 .css 文件：

:root { --main-color: red; } div { background: var(--main-color); }

会被编译成：

div { background: red; background: var(--main-color); }

这会导致一个问题：在当前 .css 文件无法使用其他 .css 文件定义的 CSS 全局变量为了解决这个问题，可以进行如下配置：

将所有的 CSS 全局变量都编写到一个 .css 文件中配置 postcss.config.js 读取并存储全局变量 const postcssPresetEnv = require('postcss-preset-env'); const path = require('path'); module.exports = { plugins: [ postcssPresetEnv({ // 读取并存储指定文件中配置的 CSS 全局变量 importFrom: path.resolve(__dirname, './globalVariable.css'), }), ], };

【本文地址】

【Vite】对 CSS 处理

【Vite】对 CSS 处理

今日新闻

推荐新闻